<%--
  User: tian
  Date: 2016/12/1
  Time: 17:20
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>AddressList</title>
</head>
<body>

	<table id="addressTable" border="1">
		<tr>
			<th v-for="item in columns">{{ item }}</th>
		</tr>
		<tr v-for="itemt in items">
			<td>{{itemt.id}}</td>
			<td>{{itemt.city}}</td>
			<td>{{itemt.province}}</td>
		</tr>
	</table>


	<script src="${pageContext.request.contextPath}/js/vue.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/vue-resource.min.js"></script>
	<script>
    var addressTable = new Vue({
        el:'#addressTable',
        data:{
            items:[],
            url:"${pageContext.request.contextPath}/address",
            columns:['id','city','province']
        },
        ready:function(){
            this.getAddress()
        },
        methods:{
            getAddress:function(){
                console.log("aa");
                this.$http.get(this.url)
                    .then(function(response){
                    this.$set('items',response.data);
                }) catch (function(response){
                        console.log(response)
                })
            }
        }
    })
</script>
</body>
</html>
